<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            justify-content: start;
            align-items: center;
            margin-bottom: 20px;
        }

        .img {
            width: 200px;
            height: 200px;
            border-radius: 10px;
            object-fit: cover;
        }

        .img:hover {
            transform: rotate3d(1, 1, 1, 45deg) scale(1.3);
            transition: all 1s;
        }

        .container .name {
            margin-left: 20px;
            width: 100px;
            text-align: center;
            font-size: 24px;
        }

        .container .desc {
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div id="root"></div>
    <script src="./sdk/react.development.js"></script>
    <script src="./sdk/react-dom.development.js"></script>
    <script src="./sdk/babel.min.js"></script>
    <script type="text/babel">
        class ListItem extends React.Component {
            constructor(props) {
                super(props);
            }
            render() {
                return <div className="container">
                    <img className="img" src={this.props.avatar} alt="" />
                    <h3 className="name">{this.props.name}</h3>
                    <p className="desc">{this.props.desc}</p>
                </div>
            }
        }
        class App extends React.Component {

            constructor(props) {
                super(props);
                this.state = {
                    loading: false,
                    data: []
                }
                setTimeout(function(){
                    console.log(this)
                }, 1000)
            }

            componentDidMount() {
                this.setState({ ...this.state, loading: true })
                setTimeout(() => {

                    const result = {
                        code: 200,
                        data: [
                            {
                                name: '哪吒',
                                avatar: 'https://am.zdmimg.com/202502/18/67b4758901b324595.jpg_e1080.jpg',
                                desc: '我命由我不由天，是魔是仙，我自己说了才算！',
                            },
                            {
                                name: '敖丙',
                                avatar: 'https://img2.baidu.com/it/u=2795281972,799143234&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=504',
                                desc: '哪吒是我最好的朋友！',
                            },
                            {
                                name: '敖闰',
                                avatar: 'https://q8.itc.cn/images01/20250120/47bb4ab78901465f9866ce62d66586f2.jpeg',
                                desc: '西海龙王——白龙马之母，敖光的妹妹',
                            },
                            {
                                name: '敖光',
                                avatar: 'https://i1.hdslb.com/bfs/archive/b08fa934082a489f3e5f3d6f5991a09122f0b355.jpg',
                                desc: '东海龙王，帅的没边',
                            },
                            {
                                name: '太乙真人',
                                avatar: 'https://pic.rmb.bdstatic.com/bjh/250209/dump/a031020b75cccfbbf772e5c5b9f4c60f.jpeg',
                                desc: '你打我噻~你打我噻',
                            }, {
                                name: '申公豹',
                                avatar: 'https://i2.hdslb.com/bfs/archive/6e9f76fe3cc9aed107587aecd5e0c8602c68f1b1.jpg',
                                desc: '人心中的成见是一座大山',
                            }
                        ],
                        message: 'success'
                    }
                    this.setState({ ...this.state, loading: false, data: result.data })
                }, 3000);
            }
            render() {
                return <div>
                    <h1>《哪吒2魔童闹海》</h1>
                    {
                        this.state.loading ? <div>数据加载中...</div> : <div>
                            {this.state.data.map((item, index) => {
                                return <ListItem key={index} name={item.name} avatar={item.avatar} desc={item.desc} />
                            })}
                        </div>
                    }

                </div>
            }
        }

        function hei() {
            console.log('111')
            console.log(this)
        }
        const hei2 = function () {
            console.log('222')
            console.log(this)
        }
        var hei4 = () => {
            console.log('444')
            console.log(this)
        }
        hei()
        hei2()
        hei4()
        ReactDOM.render(<App />, document.getElementById('root'))
    </script>
</body>

</html>